<template>
  <div class="singer-detail">
    <div>
      <i></i>
    </div>
    <h1 class="title">{{name}}</h1>
    <div class="bg-image" ref="bgimage" :style="bgStyle">
      <div ref="playBtn" v-show="songList.length>0" class="play">
        <span @click="randomPlay" class="text">随机播放全部</span>
      </div>
    </div>
    <load v-if="!songList.length"></load>
    <div class="songlist" ref="songlist">
      <div class="bg-layer" ref="bglayer"></div>
      <scroll ref="list" @scroll="scroll" :probe-type="probeType" :listen-scroll="listenScroll" class="scroll">
        <songlist :rank="rank"  @select="palySong" :songs="songList"></songlist>
      </scroll>
    </div>
  </div>
</template>

<script>
import scroll from '../base/scroll'
import songlist from '../base/songlist'
import load from '../base/load'
import {mapActions} from 'vuex'
// import {playinglistmixin} from '../../common/js/mixin'

const DEFAULT_HEIGHT = 40
export default {
  // mixins: [playinglistmixin],
  props: {
    songList: {
      type: Array,
      default: []
    },
    image: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      dafault: ''
    },
    rank: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      scrollY: 0
    }
  },
  created() {
    this.probeType = 3
    this.listenScroll = true
  },
  methods: {

    scroll(pos) {
      this.scrollY = pos.y
    },
    palySong(index) {
      this.selectPlay({list: this.songList, index})
    },
    randomPlay() {
      this.randomPlayAll({list: this.songList})
    },
    ...mapActions([
      'selectPlay',
      'randomPlayAll'
    ])
  },
  mounted() {
    this.imageHeight = this.$refs.bgimage.clientHeight
    this.$refs.songlist.style = `top:${this.imageHeight}px`
  },
  watch: {
    scrollY(newY) {
      // 这样每次都会获取，太消耗性能
      // let maxheight = this.$refs.bgimage.clientHeight - DEFAULT_HEIGHT
      let index = 0
      let scale = 1
      if (newY > 0) {
        scale = scale + newY / this.imageHeight
      }
      let translateY = Math.max(-this.imageHeight + DEFAULT_HEIGHT, newY)
      this.$refs.bglayer.style.transform = `translateY(${translateY}px)`
      if (newY < -this.imageHeight + DEFAULT_HEIGHT) {
        index = 11
        this.$refs.bgimage.style.zIndex = `${index}`
        this.$refs.bgimage.style.height = `${DEFAULT_HEIGHT}px`
        this.$refs.bgimage.style.paddingTop = 0
      } else {
        this.$refs.bgimage.style.zIndex = `${index}`
        this.$refs.bgimage.style.height = 0
        this.$refs.bgimage.style.paddingTop = '70%'
        // 样式需要设置transform-origin为top
        this.$refs.bgimage.style.transform = `scale(${scale})`
      }
    }
  },
  components: {
    songlist,
    scroll,
    load
  },
  computed: {
    bgStyle() {
      return `background-image:url(${this.image})`
    }
  }
}
</script>

<style lang="scss" scoped>
.singer-detail {
  position: fixed;
  z-index: 100;
  background-color: #222;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  color: white;
  .title {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0;
    margin: 0;
    font-size: 18px;
    letter-spacing: 3px;
    font-weight: 500;
    z-index: 101;
    line-height: 40px;
    height: 40px;
  }
  .bg-image {
    width: 100%;
    height: 0;
    padding-top: 70%;
    background-size: cover;
    transform-origin: top;
    position: absolute;
    .play {
      margin: 0 auto;
      box-sizing: border-box;
      width: 135px;
      padding: 7px 0;
      position: relative;
      top:-40px;
      text-align: center;
      border: 1px solid #d93f30;
      color: #d93f30;
      border-radius: 100px;
      font-size: 0;
      .icon-play {
        display: inline-block;
        vertical-align: middle;
        font-size: 12px;
      }
      .text {
        display: inline-block;
        vertical-align: middle;
        font-size: 12px;
      }
    }
  }
  .songlist {
    position: fixed;
    bottom: 0;
    width: 100%;
    .bg-layer {
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: #222;
    }
    .scroll {
      position: absolute;
      height: 100%;
      top:0;
      width: 100%;
    }
  }
}
</style>
